<template>
  <div class='newsinfo-container'>
      <!--大标题-->
    <h3 class='title'>{{newsinfo.title}}</h3>

    <!--子标题-->
    <p class="subtitle">
        <span>发表时间：{{newsinfo.add_time | dateFormat}}</span>
        <span>点击：{{newsinfo.click}}次</span>
    </p>

    <hr>
    <!--内容区-->
    <div class='content' v-html="newsinfo.content"></div>

    <!--评论区-->
    <comment-box :id='id'></comment-box>
  </div>
</template>
<script>
import {Toast} from "mint-ui"

//1.导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
    data(){
        return{
            id:this.$route.params.id ,//将url地址中传递过来的id的值，挂载到data上，方便以后调用
            newsinfo:{}//新闻对象
        }
    },
    created(){
        this.getNewsInfo()
    },
    methods:{
        getNewsInfo(){
            //获取新闻详情
           this.$http.get('newsinfo/'+this.id).then(result=>{
               //console.log('**大大**大大**大大**'+JSON.stringify(result))
              console.log(result)
               if(result.status===200){
                  // console.log(result.body)
                   this.newsinfo=result.body
                   
               }else{
                   console.log('失败了')
                   Toast('获取新闻详情失败！')
               }
           })
        }
    },
    components:{//用来注册组件
      'comment-box':comment
    }
}
</script>
<style lang="scss" scoped>
.newsinfo-container{
    padding:0 5px;
    .title{
        font-size:16px;
        text-align:center;
        margin:15px 0;
        color:red
    }
    .subtitle{
        font-size:13px;
        columns: #226aff;
        display:flex;
        justify-content:space-between;
    }
    .content{

    }
}
</style>